<template>
	<div class="serverList">
		<div class="serverItems" v-for="(item,index) in list" :key="index" @click='classEvent(item.class_id,item.time_id)'>
			<div class="serverItemsLeft">
				<image :src="item.image" mode=""></image>
			</div>
			<div class="serverItemsRight">
				<div class="serverItemsRight_top">
					<div class="serverItemsRight_text ex">
						{{item.title}}
					</div>
					
				</div>
				<div class="serverItemsRight_top_time">
					{{item.time}}
				</div>
				<div class="serverItemsRight_bottom">
					{{item.su_title}}
				</div>

			</div>
			<div class="serverItemsBtn colorHui" v-if="item.count == 0">
				已约满
			</div>
			<div class="serverItemsBtn" v-else>
				剩{{item.count}}人
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: [String, Array]
		},
		data() {
			return {

			}
		},
		methods: {
			classEvent(id,time_id) {
				uni.navigateTo({
					url: '/pages/class/classDetail?id=' + id + '&time_id=' + time_id
				})
			}

		}
	}
</script>

<style lang="less">
	.serverList {
		padding: 0 28rpx;
		box-sizing: border-box;
		

		.serverItems {
			width: 100%;
			height: 244rpx;
			border-bottom: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;

			.serverItemsBtn {
				width: 126rpx;
				height: 54rpx;
				border-radius: 27rpx;
				border: 2rpx solid #9013FE;
				font-size: 28rpx;
				color: #9013FE;
				text-align: center;
				line-height: 54rpx;
				top: 42rpx;
				right: 0;
				position: absolute;
			}
		}
		.colorHui{
			border: 2rpx solid #666;
			color: #666;
		}

		.serverItems:last-child {
			border: none
		}

		.serverItemsLeft {
			width: 238rpx;
			min-width: 238rpx;
			height: 172rpx;

			image {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.serverItemsRight {
			margin-left: 22rpx;

			.serverItemsRight_top {
				font-size: 36rpx;
				font-weight: bold;
				display: flex;

				.serverItemsRight_text {
					width: 250rpx;
				}

				

			}
			.serverItemsRight_top_time {
				font-size: 28rpx;
				color: #666666;
				margin-top: 2rpx;
				font-weight: 400;
			}

			.serverItemsRight_bottom {
				margin-top: 32rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}
</style>